<template>
	<view class="home" @touchstart="onTouchStart" @touchmove="onTouchMove">
		<view v-if="!switchFlag" class="button-container">
			<button type="primary" :style="heightAuto" class="button" v-for="(item, index) in content"
				@click="show(item)" :class="{ 'button-hover': hoverIndex === index }" @mouseover="hoverIndex = index"
				@mouseleave="hoverIndex = -1">
				<span class="button-text">{{ item.name }}</span>
				<span class="button-icon">→</span>
			</button>
		</view>
		<view class="article" v-if="switchFlag">
			<!-- 添加返回按钮 -->
			<view class="back-button" @click="switchShow">
				<text>返回</text>
			</view>
			<view class="passage" v-for="(item, index) in showItem.content" @click="toggleTranslate(index)">
				<text :class="{ 'translated-text': showTranslate[index] }">
					{{ showTranslate[index] ? item.translate : item.raw }}
				</text>
			</view>
		</view>

		<!-- 模糊背景 -->
		<view class="blur-background" v-if="searchActive"></view>

		<!-- 搜索框 -->
		<view class="search-box" v-if="searchActive">
			<input type="text" placeholder="全文搜索" class="search-input" v-model="searchQuery" @input="handleSearchInput">
			<!-- 搜索结果 -->
			<view class="search-results">
				<view class="result-item" v-for="(result, index) in searchResults" :key="index"
					@tap="goToResult(result)">
					{{ result.summary }}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import {
	bingfa
} from '../../static/content.js'
export default {
	data() {
		return {
			content: bingfa,
			showItem: {},
			switchFlag: false,
			heightAuto: {
				height: '2.9rem'
			},
			searchQuery: '',
			searchActive: false,
			searchResults: [],
			startY: 0,
			title: '孙子兵法',
			showTranslate: [] // 用于记录每个段落是否显示翻译
		}
	},
	onReady() {
		// 动态计算样式
		this.autoHeightCacl()
	},
	methods: {
		onTouchStart(event) {
			// 记录触摸起始位置
			this.startY = event.touches[0].clientY;
		},
		onTouchMove(event) {
			// 计算触摸移动距离
			const currentY = event.touches[0].clientY;
			const deltaY = currentY - this.startY;
			// 设置一个阈值，例如100px，当下拉超过这个距离时触发事件
			if (deltaY > 100) {
				// 执行你的事件逻辑
				this.searchActive = !this.searchActive
				// 可以在这里执行一些逻辑，比如显示搜索框等操作
				// 例如：this.showSearchBox = true;
			}
		},
		autoHeightCacl() {
			// 计算按钮数量
			const buttons = document.querySelectorAll('.home .button');

			const buttonCount = buttons.length;
			// 设置 CSS 变量，传递按钮数量给 CSS 使用
			// 计算每个按钮的 margin-top 和 margin-bottom 的总和
			const buttonMarginTotal = parseFloat(getComputedStyle(buttons[0]).marginTop) +
				parseFloat(getComputedStyle(buttons[0]).marginBottom);
			const containerHeight = document.querySelector('.home').clientHeight;
			// 计算每个按钮的高度
			const buttonHeight = (containerHeight - (buttonCount - 1) * buttonMarginTotal) / buttonCount;
			this.heightAuto = {
				height: buttonHeight + 'px'
			}
		},
		switchShow() {
			this.switchFlag = !this.switchFlag
			if (!this.switchFlag) {
				uni.setNavigationBarTitle({
					title: this.title
				});
			}
			this.showTranslate = []
			this.searchActive = false
		},
		show(item) {
			this.switchFlag = true
			this.showItem = item
			uni.setNavigationBarTitle({
				title: item.name
			});

			this.$nextTick(() => {
				window.scrollTo({
					top: 0,
					behavior: 'smooth'
				})
			})

		},
		toggleSearch() {
			this.searchActive = !this.searchActive; // 切换搜索框的显示状态
		},
		goToResult(result) {
			this.searchActive = false;

			// 如果切换的是不同文章，重置翻译状态
			if (this.showItem !== result.item) {
				this.showTranslate = [];
			}

			this.show(result.item);

			this.$nextTick(() => {
				// 如果是标题匹配，直接滚动到顶部
				if (result.isTitle) {
					window.scrollTo({
						top: 0,
						behavior: 'smooth'
					});
					return;
				}

				// 设置对应的翻译状态
				this.$set(this.showTranslate, result.contentIndex, result.showTranslate);

				// 找到对应的段落元素并滚动到该位置
				setTimeout(() => {
					const passages = document.querySelectorAll('.passage');
					if (passages[result.contentIndex]) {
						passages[result.contentIndex].scrollIntoView({
							behavior: 'smooth',
							block: 'center'
						});
					}
				}, 100);
			});
		},
		handleSearchInput() {
			const key = this.searchQuery
			const SUMMARY_LENGTH = 8;
			const result = []
			if (key) {
				this.content.forEach(item => {
					if (item.name.indexOf(key) > -1) {
						result.push({
							summary: item.name,
							item: item,
							isTitle: true // 标记为标题匹配
						})
					}
					item.content.forEach((item2, contentIndex) => {
						if (item2.raw && item2.raw.indexOf(key) > -1) {
							let index = item2.raw.indexOf(key);
							let start = Math.max(0, index - SUMMARY_LENGTH);
							let end = Math.min(item2.raw.length, index + key.length + SUMMARY_LENGTH);
							let summary = (start > 0 ? '...' : '') + item2.raw.substring(start, end) +
								(end < item2.raw.length ? '...' : '');
							result.push({
								summary: summary,
								item: item,
								contentIndex: contentIndex,
								showTranslate: false // 直接显示原文
							});
						}
						if (item2.translate && item2.translate.indexOf(key) > -1) {
							let index = item2.translate.indexOf(key);
							let start = Math.max(0, index - SUMMARY_LENGTH);
							let end = Math.min(item2.translate.length, index + key.length + SUMMARY_LENGTH);
							let summary = (start > 0 ? '...' : '') + item2.translate.substring(start, end) +
								(end < item2.translate.length ? '...' : '');
							result.push({
								summary: summary,
								item: item,
								contentIndex: contentIndex,
								showTranslate: true // 直接显示翻译
							});
						}
					})
				})
			}
			this.searchResults = result;
		},
		toggleTranslate(index) {
			this.$set(this.showTranslate, index, !this.showTranslate[index])
		}
	}
}
</script>

<style scoped>
/* 调整文章容器的底部间距 */
.article {
	margin: 1rem;
	padding: 1rem;
	height: calc(100vh - 6rem);
	/* 增加底部间距 */
	overflow-y: auto;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	padding-bottom: 60px;
	/* 增加底部内边距 */
}


.back-button {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 14px;
	opacity: 0.6;
	/* 降低透明度 */
	animation: pulse 2s infinite;
	cursor: pointer;
	z-index: 100;
	backdrop-filter: blur(5px);
	/* 添加毛玻璃效果 */
	transition: opacity 0.3s ease;
	/* 添加过渡效果 */
}

.back-button:hover {
	opacity: 0.9;
	/* 鼠标悬停时提高透明度 */
}

/* 移除之前的::after伪元素 */
.article::after {
	display: none;
}

.passage {
	text-indent: 2em;
	margin-bottom: 1rem;
	/* 调整段落间距 */
	line-height: 1.6;
	/* 设置行高，增加段落的可读性 */
	cursor: pointer;
	/* 添加手型指针 */
	transition: background-color 0.2s;
	/* 添加过渡效果 */
}

.passage:hover {
	background-color: #f8f8f8;
	/* 鼠标悬停时的背景色 */
}

.home .button {
	margin: 0.2rem 1rem;
	background-image: linear-gradient(to right, #273c75, #82589F);
	/* height: 2.7rem; */
}

.blur-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	/* 半透明黑色背景，模糊效果 */
	backdrop-filter: blur(5px);
	/* 背景模糊效果，根据需要调整 */
	z-index: 10;
	/* 确保在搜索框之上 */
}

.search-box {
	position: fixed;
	top: 20%;
	left: 50%;
	transform: translateX(-50%);
	background-color: #fff;
	padding: 24px;
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	z-index: 20;
	width: 90%;
	max-width: 480px;
	animation: slideDown 0.4s cubic-bezier(0.23, 1, 0.32, 1);
	transition: all 0.3s ease;
}

.search-input {
	width: 100%;
	padding: 12px 16px;
	border: 2px solid #e0e3e7;
	border-radius: 8px;
	font-size: 16px;
	transition: all 0.3s ease;
	margin-bottom: 16px;
}

.search-input:focus {
	border-color: #4a90e2;
	box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
	outline: none;
}

.search-results {
	width: 100%;
	max-height: 60vh;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #4a90e2 #f0f0f0;
}

.search-results::-webkit-scrollbar {
	width: 6px;
}

.search-results::-webkit-scrollbar-track {
	background: #f0f0f0;
	border-radius: 3px;
}

.search-results::-webkit-scrollbar-thumb {
	background: #4a90e2;
	border-radius: 3px;
}

.result-item {
	padding: 12px 16px;
	border-radius: 8px;
	margin: 4px 0;
	background-color: #f8f9fa;
	transition: all 0.3s ease;
	cursor: pointer;
}

.result-item:hover {
	background-color: #e9ecef;
	transform: translateX(4px);
}

.result-item:active {
	background-color: #dee2e6;
}

@keyframes slideDown {
	0% {
		opacity: 0;
		transform: translate(-50%, -20px);
	}

	100% {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

.translated-text {
	color: #2c3e50;
	background: linear-gradient(145deg, #f0f4ff, #e6f0ff);
	padding: 8px 12px;
	border-radius: 8px;
	display: inline-block;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	border-left: 4px solid #4a90e2;
	transition: all 0.3s ease;
}

.passage {
	margin: 12px 0;
	padding: 8px;
	border-radius: 8px;
	transition: all 0.3s ease;
	cursor: pointer;
}

.passage:hover {
	background-color: rgba(74, 144, 226, 0.05);
	transform: translateX(4px);
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.passage {
	animation: fadeIn 0.4s ease forwards;
}

@keyframes pulse {
	0% {
		opacity: 0.8;
	}

	50% {
		opacity: 0.5;
	}

	100% {
		opacity: 0.8;
	}
}

.home {
	padding-top: var(--status-bar-height);
	/* 适配状态栏高度 */
}

.button-container {
	display: grid;
	gap: 1rem;
	padding: 1rem;
}

.button {
	position: relative;
	background: linear-gradient(145deg, #4a90e2, #6a5acd);
	border: none;
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
}

.button::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg,
			transparent,
			rgba(255, 255, 255, 0.4),
			transparent);
	transition: 0.5s;
}

.button:hover::before {
	left: 100%;
}

.button-text {
	font-size: 16px;
	font-weight: 500;
	color: white;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.button-icon {
	font-size: 20px;
	color: white;
	opacity: 0;
	transform: translateX(-10px);
	transition: all 0.3s ease;
}

.button-hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.button-hover .button-icon {
	opacity: 1;
	transform: translateX(0);
}

@keyframes buttonHover {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.05);
	}

	100% {
		transform: scale(1);
	}
}

.button:active {
	animation: buttonHover 0.3s ease;
}
</style>